<template>
  <canvas id="canvas"></canvas>
    <a-button v-show="StartSwitch" @click="startGame" class="start" type="primary">
    <p class="flash animated infinite">Start Game</p>
  </a-button>
  <audio  autoplay="autoplay" loop="loop" preload="auto" :src="music">
  </audio>
</template>

<script setup>
import {useRouter,useRoute} from "vue-router";
import {reactive,ref} from 'vue'
//引入路由
const router = useRouter();
//控制开始游戏按钮显示
let StartSwitch = ref(true);
function startGame(){
  StartSwitch.value = false;
  router.push({path:'/chapter',query:{chapter:1,index:0}});
}
//首页的背景音乐
const music = ref('https://zhenlinggong.oss-cn-beijing.aliyuncs.com/zlg/1668137070747Kevin MacLeod - I Feel You.mp3');
</script>

<style scoped>
.start{
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash
}

@-webkit-keyframes flash {
  /*只用修改这里就可以实现不同动画。例如大小闪烁transform: scale(.9);*/
  0%,
  100%,
  50% {
    opacity: 1;
    transform: scale(1);
  }

  25%,
  75% {
    opacity: 0.4;
    transform: scale(.9);
  }
}

@keyframes flash {

  0%,
  100%,
  50% {
    opacity: 1;
    transform: scale(1);
  }

  25%,
  75% {
    opacity: 0.4;
    transform: scale(.9);
  }
}
</style>